<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>FIRST</title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			.container{
				width: 100vw;
				height: 100vh;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		canvas{
			width: 400px;
			height: 400px;
			border: 10px solid #333333;
		}	
		
		</style>
	</head>
	<body>
		<div class="container">
		<canvas id="canvas" width="500" height="500"></canvas>
		
		<input type="button" value="右移" id="right-btn" />
		<input type="button" value="左移" id="left-btn" />
		<input type="button" value="上移" id="up-btn" />
		<input type="button" value="下移" id="down-btn" />
		
		</div>
	</body>
	<script>
		window.onload = function() {
			
			let oCanvas = document.getElementById('canvas');
		
			console.dir(oCanvas);
			
			let oPen=oCanvas.getContext("2d");
			
			oPen.fillStyle="pink";
			let x = 100,
			    y = 100,
			    width = 100,
			    height = 100;
			oPen.fillRect(x,y,width,height);
			
			//rotate(角度)
//			setInterval(function(){
//				oPen.translate(x+width/2,y+height/2);
//				oPen.rotate(Math.PI/180*30);
//				oPen.translate(-(x+width/2),-(y+height /2));
//				oPen.clearRect(0,0,500,500);
//				oPen.fillRect(x,y,width,height);
//			},1)
			
			
			
//			/**
//			 * scanle(x,y)
//			 * x在x上缩放x倍，y在y上缩放y倍
//			 */
//			let scaleX = 0.5;
//			let scaleY = 0.5;
//			oPen.fillStyle= "green";
//			oPen.scale(0.5,0.5);
//			oPen.translate((x+ width/2)*(1-scaleX),(y+height/ 2)*(1-scaleY));
//			oPEn.scale(scaleX,scaleY);
//			oPen.fillRect(x,y,width,height)
			
			
			oPen.fillRect(0,0,100,100);
			/**
			 * 在x轴上移动x（px），在y轴上移动y（px）
			 * translate（x，y）；
			 */
			
//			oPen.translate(10,10);
//			oPen.fillStyle="red";
//			oPen.fillRect(0,0,100,100);
//			
//			oPen.translate(10,10);
//			oPen.fillStyle="blue";
//			oPen.fillRect(0,0,100,100);
//			
//			oPen.translate(10,10);
//			oPen.fillStyle="yellow";
//			oPen.fillRect(0,0,100,100);
			
			let oRightBth = document.getElementById('right-btn')
			oRightBth.onclick = function(){
				for(i=1;i<80;i++){
				move(10,0)	
				i+=1;
				}
				
			}
			
//			let oLeftBth = document.getElementById('left-btn')
//			oLeftBth.onclick = function(){
//				move(-10,0)
//			}
//			
//			let oUpBth = document.getElementById('up-btn')
//			oUpBth.onclick = function(){
//				move(0,10)
//			}
//			
//			let oDownBth = document.getElementById('down-btn')
//			oDownBth.onclick = function(){
//				move(0,10)
//			}
//			
			function move(x,y){
				oPen.clearRect(0,0,500,500);
				oPen.translate(x,y);
				oPen.fillRect(0,0,100,100);
			}
		}	
	</script>
</html>
